<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增业主</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/page.css" />

    <style>
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    </style>
</head>
<body>

<div id="app">

  <div class="addBrand-container" id="food-add-app">

    <div class="container">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="所属小区" prop="communityName">
          <el-select v-model="ruleForm.communityName" placeholder="请选择所属小区">
            <el-option label="休伯利安" value="休伯利安"></el-option>
            <el-option label="璃月" value="璃月"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="业主名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="业主照片" prop="picture">
          <el-upload
                  class="avatar-uploader"
                  action="/file/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="" >
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="身份证号" prop="idcard">
          <el-input v-model="ruleForm.idcard"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" prop="telephone">
          <el-input v-model="ruleForm.telephone"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="出生日期" required v-if="id === ''">
          <el-col :span="11">
            <el-form-item prop="birthday">
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthday" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>

</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<!-- 引入前端响应拦截器 -->
<script src="../../js/request.js"></script>

<script src="../../js/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        imageUrl: '',
        ruleForm: {
          //小区名称
          communityName: '',
          //业主名称
          name: '',
          //身份证号
          idcard: '',
          //联系方式
          telephone: '',
          //出生日期
          birthday: '',
          //性别
          sex: '',
          //业主照片
          picture: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入业主名称', trigger: 'blur' },
          ],
          communityName: [
            { required: true, message: '请选择小区名称', trigger: 'change' }
          ],
          idcard: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
          ],
          telephone: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
          ],
          birthday: [
            { type: 'date', required: true, message: '请选择出生日期', trigger: 'change' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
        }
      };
    },

    created() {
      let id = requestUrlParam('id');
      this.id = id;
      axios({
        url: "http://localhost:8080/owner/one",
        method: 'get',
        params: { id }
      }).then(resp => {
        if (resp.data.result === true) {

          let dateStr = resp.data.data.birthday;
          dateStr = dateStr.replace('年',"-").replace('月','-').replace('日','-');
          resp.data.data.birthday = new Date(dateStr);

          resp.data.data.createTime = null;
          resp.data.data.updateTime = null;

          this.imageUrl = `/file/download?name=` + resp.data.data.picture

          this.ruleForm = resp.data.data
        }
      })
    },

    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios({
              url: "http://localhost:8080/owner/add",
              method: 'put',
              data: this.ruleForm
            }).then(resp => {
              if (resp.data.result === true) {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.resetForm('ruleForm')
              } else {
                this.$message({
                  type: 'error',
                  message: '操作失败,请稍后再试!'
                });
              }
            })
            console.log(this.ruleForm)
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.imageUrl = '';
      },

      goBack(){
        window.parent.menuHandle({
          id: '4',
          url: 'page/owner/owner.html',
          name: '业主信息'
        },false)
      },

      //图片上传
      handleAvatarSuccess(response, file) {
        // 拼接down接口预览
        if(response.code === 0 && response.msg === '未登录'){
          window.top.location.href = '/web/page/login/login.html'
        }else{
          this.imageUrl = `/file/download?name=${response.data}`
          this.ruleForm.picture = response.data
        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  });
</script>

</body>
</html>